/**
  <my-kind-editor :html-obj="htmlObj" :text-name="textName" @callback-method="callbackMethod" ref="editorRef"></my-kind-editor>
  <my-kind-editor :html-obj="htmlObj1" :text-name="textName1" @callback-method="callbackMethod" ref="editorRef1"></my-kind-editor>
  <my-kind-editor :html-obj="htmlObj2" :text-name="textName2" @callback-method="callbackMethod" ref="editorRef2"></my-kind-editor>
  import myKindEditor from 'components/myKindEditor/editor'
  data () {
  return {
    htmlObj: '<p>你好这是一个富文本</p>',
    htmlObj1: '<p>你好这是一个富文本1111</p>',
    htmlObj2: '<p>你好这是一个富文本22222</p>',
    textName: 'tx-content',
    textName1: 'tx-content1',
    textName2: 'tx-content2'
  }
  },
  methods: {
    callbackMethod (obj) {
      console.log('得到富文本值', obj)
    },
    clickEvemt () {
      this.$refs.editorRef.$emit('myChildEditor')
      this.$refs.editorRef1.$emit('myChildEditor')
      this.$refs.editorRef2.$emit('myChildEditor')
    }
  }
 **/
<template>
  <div>
    <textarea :name="textName" style="visibility:hidden;" onkeyup="this.value=this.value.replace(/^\s+|\s+$/g,'')"></textarea>
    <el-dialog class="eImgClass"
      title="图片"
      :visible.sync="dialogVisible"
      width="450px"
      :before-close="handleClose">
      <div class="flex">
        <p style="line-height: 30px;">上传文件：</p>
        <input type="text" v-model="form.imgUrlName" disabled="disabled" style="border: 1px solid #cfcfcf;padding: 0 5px;margin-right: 20px;height: 30px;" />
        <upload :type="4" :successCallback="successCallback" :removeCallback="removeCallback" :httpAddress="httpAddress" style="width:80px"></upload>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose" v-resetClick>取 消</el-button>
        <el-button type="primary" @click="saveEvent" v-resetClick>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import KindEditor from 'KindEditor'
import upload from 'components/common/upload'
let eventThis = null
export default {
  props: {
    htmlObj: {
      type: String,
      default: ''
    },
    textName: {
      type: String,
      default: 'tx-content'
    }
  },
  data () {
    return {
      form: {
        imgUrlName: '',
        imgUrl: ''
      },
      editor: null,
      dialogVisible: false,
      httpAddress: '/boss/merchant/upload-logo'
    }
  },
  created () {
    this.$on('myChildEditor', function () {
      this.$emit('callback-method', this.editor.html())
    })
  },
  mounted () {
    let options = {
      width: '700px',
      height: '350px',
      filterMode: false,
      items: [
        'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'cut', 'copy', 'paste',
        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'table', 'hr', 'pagebreak', 'eImg', 'link'
      ]
    }
    let copyThis = this
    KindEditor.plugin('eImg', function (K) {
      var editor = this
      eventThis = this
      var name = 'eImg'
      // 点击图标时执行
      editor.clickToolbar(name, function () {
        copyThis.showImg()
      })
    })
    KindEditor.lang({
      eImg: '图片'
    })
    this.editor = KindEditor.create(`textarea[name=${copyThis.textName}]`, options)
    this.editor.html('')
    this.editor.html(copyThis.htmlObj) // 设置HTML内容
  },
  methods: {
    showImg () {
      this.form = {
        imgUrlName: '',
        imgUrl: ''
      }
      this.dialogVisible = true
    },
    handleClose (done) {
      this.form = {
        imgUrlName: '',
        imgUrl: ''
      }
      this.dialogVisible = false
    },
    saveEvent () {
      if (!this.form.imgUrl) {
        return this.$message.error('请上传图片')
      }
      let data = `<img src="${this.form.imgUrl}" alt="" style="border: 1.5px solid #e0eaf3;"/>`
      eventThis.insertHtml(data)
      this.dialogVisible = false
    },
    successCallback (response, file, fileList) { // 上传文件成功回调
      this.$message({
        message: '上传成功!',
        type: 'success'
      })
      this.form.imgUrlName = file.name
      this.form.imgUrl = response.data.url
    },
    removeCallback (file, fileList) { // 上传成功的文件用户点击删除
    }
  },
  components: {
    upload
  }
}
</script>
<style lang="less">
.ke-icon-eImg {
  background-image: url(../../assets/img/e-img.png) !important;
  background-size: 16px;
  width: 16px;
  height: 16px;
}
.ke-dialog-body img {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  display: inline;
  width: auto;
}
// [title~='图片'] {
//   display: none!important;
// }
.ke-button-common{white-space: nowrap;}
.eImgClass{
  .el-dialog__header{
    order: 0;
    margin: 0;
    padding: 0 10px;
    background: #F0F0EE;
    border-bottom: 1px solid #CFCFCF;
    height: 35px;
    font: 12px/24px "sans serif",tahoma,verdana,helvetica;
    text-align: left;
    color: #222;
    cursor: move;
  }
  .el-dialog__title{font-size: 14px;line-height: 35px;}
  .el-dialog__headerbtn{
    top: 10px;
    right: 8px;
  }
  .el-button{padding: 8px 20px;}
}
</style>
